<template>
  <div class="theme-active-text-color content">
    <div v-if="!agreeId" class="input_id">
        <el-form :inline="true" :model="agree" class="demo-form-inline">
          <el-form-item label="请先输入录入合同编号">
            <el-input v-model="agree.agreeId" placeholder="合同编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div v-if="agreeId" class="agree_content">
     <div class="agree_top">
       <div>所属合同:{{agreeId}}</div>
       <div class="sumit_btn"><el-button size="mini" type="primary" round @click="submitInput">提交录入</el-button></div>
     </div>
     <div class="agree_detail">
       <div v-for="(item,index) in inputForm" :key="index">
          <div class="detail_title">材料{{index+1}} <i class="el-icon-error" @click="del(index)"></i></div>
          <el-input class="input_w2" v-model="item.name" placeholder="注明型号,与合同名称一致"><template slot="prepend">名称</template></el-input>
          <el-input class="input_w" v-model="item.count" placeholder="注明单位 100件"><template slot="prepend">数量</template></el-input>
          <el-input class="input_w" v-model="item.price" placeholder="注明单位 100/件"><template slot="prepend">单价</template></el-input>
       </div>
       <el-button size="mini" round @click="addGoods" type="primary">添加材料</el-button>
     </div>
   </div>
   <div v-if="agreeId" class="input_list">
     <div class="input_title">附件上传区:</div>
     <div class="input_box">
       <el-form :inline="true" :model="agree" class="demo-form-inline" label-position="top">
          <el-form-item label="上传送货小票照片">
            <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              accept=".jpg, .jpeg, .png"
              :auto-upload="false"
              :on-change="sendImgChange">
              <img v-if="sendImg" :src="sendImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="上传调价函">
            <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              accept=".jpg, .jpeg, .png"
              :auto-upload="false"
              :on-change="priceImgChange">
              <img v-if="priceImg" :src="priceImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
       
     </div>
   </div>
  </div>
</template>

<script>
import { searchAgreeId,sendRecordInput } from '@/api';
import fileImport from "@/utils/fileImport";

export default {
  name: "",
  components: {},
  data() {
    return {
      agree:{
        agreeId:''
      },
      agreeId:'',
      inputForm:[{
        name:'',
        count:0,
        price:''
      }],
      sendImg:"",   //送货小票图片
      priceImg:"",  //调价函图片

    };
  },
  created() {
    this.id = this.$route.query.id;
    // this.searchProcess()
  },
  methods: {

    async onSubmit(){
      let res = await searchAgreeId({
        id:this.agree.agreeId
      })
      if(res.data.length>0){
        this.agreeId = this.agree.agreeId
      }else{
        this.$message.error('未找到对应的合同');
      }
    },

    addGoods(){
      let good={
        name:'',
        count:0,
        price:''
      }
      this.inputForm.push(good)
    },

    del(index){
      this.inputForm.splice(index,1)
    },

    //上传送货小票图片
    sendImgChange(file){
      let that = this;
      // this.sendImg = URL.createObjectURL(file.raw);
      fileImport({ file: file.raw }, "/upload/sendImg").then(res => {
          if(res){
            that.sendImg = res.data
          }
        });
    },

    //上传调价函图片
    priceImgChange(file){
      let that = this;
      // this.priceImg = URL.createObjectURL(file.raw);
      fileImport({ file: file.raw }, "/upload/sendImg").then(res => {
          if(res){
            that.priceImg = res.data
          }
        });
    },

    //提交送货记录
    async submitInput(){
      let that = this;
      let res = await sendRecordInput({
        sendImg: that.sendImg ? that.sendImg:"",
        priceImg: that.priceImg ? that.priceImg:"",
        tableId:this.agreeId,
        list:this.inputForm})
      if(res){
       this.$message.success('录入成功');
       this.inputForm=[{
        name:'',
        count:0,
        price:''
       }]
      }
    },

   
     
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: .1rem;
  display: flex;

    .input_id{
      width: 100%;
      height: 100%;
      background: rgb(253, 253, 253);
      display: flex;
      justify-content: center;
      align-items: center;
    }

  .agree_content{
    width: 550px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;

    .agree_top{
      width: 100%;
      height: .5rem;
      box-sizing: border-box;
      display: flex;
      color: #000;
      font-size: .14rem;
      padding: 20px;
      font-weight: 600;
      justify-content: space-between;
      align-items: center;
      background: rgb(207, 230, 243);
      .sumit_btn{
        .el-button--primary {
            color: #FFF;
            background-color: #6d0b0b;
            border-color: #6d0b0b;
        }
      }
    }

    .agree_detail{
      padding: 10px;
      color: rgb(87, 85, 85);
      font-size: .14rem;
      .title{
        font-size: .15rem;
        color: #000;
        margin-bottom: 10px;
      }
      .detail_title{
        font-weight: 600;
        padding: 5px;
      }

      .input_w{
        width: 225px !important;
      }
      .input_w2{
        width: 450px !important;
      }

    .el-button--mini, .el-button--mini.is-round {
        padding: 7px 15px;
        width: 450px;
        height: 40px;
        margin: 5px;
    }
      
    }
  }

  .input_list{
    width: 67%;
    margin-left: 10px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;

    .input_title{
      width: 100%;
      height: .5rem;
      box-sizing: border-box;
      display: flex;
      color: #000;
      font-size: .14rem;
      padding: 20px;
      font-weight: 600;
      justify-content: space-between;
      align-items: center;
      background: rgb(207, 230, 243);
    }
  }
}
</style>
<style lang="less">
//图片上传
  .input_box{
    margin: 10px 30px;

    .el-form--inline .el-form-item {
        display: inline-block;
        margin-right: 40px;
        vertical-align: top;
    } 
    
      .avatar-uploader .el-upload {
      border: 1px dashed #706f6f;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }

</style>